Advanced CSS3 and HTML5

Introduction

Welcome to Lesson 8! Today we'll explore new features and techniques available in HTML5 for organizing and structuring page content.

Let's start with the way HTML has traditionally organized page content. There are headings (<h1>, <h2>, and so on). There are paragraphs (the <p> tag). And there are lists and other tags that organize content into different elements.

But none of those elements (headings, paragraphs, lists, and so on) tells you anything about the content of the material. Is that content an article? A section of an article? Is it a sidebar to an article? Is it a time for an upcoming event? Or is it a navigation area in a page?

The word semantic means "related to meaning." Semantic HTML5 tags tell you the meaning of the content in them—not just how big they are or whether to display that content with a number or bullet in front of it. Content in an <article> element is an article. Content in an <aside> element is an aside (in other words, it's a sidebar—text that's related to an article or a section of an article). Content in a <nav> element is navigation links.

Why Use HTML5 Semantic Markup Tags?

There are some compelling reasons to spend the time and effort to learn semantic tags.

1. They make design easier. You don't have to invent your own sets of class and ID styles for things like sidebars and headings because those elements are already part of the HTML5 package.
   
   

2. They affect search engine optimization. Most experts agree that search engines now use HTML5 semantic markup to index your page content and make it available in search results. In the future, search engines are likely to rely on these semantic tags more and more.
   
   

3. You don't want to play catch-up. Not everyone is using semantic tags right now, but their benefits will make them increasingly popular. It's better to learn and use the tags now rather than spending time, money, and effort retrofitting pages a few months from now.
   
   

As more search engines and browsers use semantic markup to recognize content and make it accessible, we'll see changes in how people search for and use content. For example, services like Yelp—which helps people find restaurants, shows, and other venues and activities—might use the HTML5 <address> element to extract the location of a club. That makes it easy for the club's name to pop up on the screen when people are searching for a fun place to party.

Unlike traditional elements (like <h1> headings and <ul> unordered lists), there's no default formatting for most of the new HTML5 semantic tags. So if you define some content with an <article> tag, that content does not, in most cases, display in any particular way. That means designers create their own styles for semantic tags. You'll see how this works before this lesson is through, as we define CSS selectors for HTML5 semantic elements.

The concept to grab onto tightly here is that semantic tags are not, essentially, formatting tools. Instead, they're elements that make it easier to design pages, and—as the Web and search engines evolve—make it easier for users to connect with content.

Let's consider an example: a website for a performance venue. The site has a line of text on one page that says "Next show is June 15th." The same website has article on another page about a retro country music performer whose musical influences include June Carter Cash. And the "Directions" page lists the venue address at 100 June Avenue.

With HTML5, a designer can embed "June 15th" inside a <datetime> element:

Next concert is <time datetime="2015-06-15">June 15th</time>

And the designer can embed the address in an <address> element:

We are located at <address>100 June Avenue</address>

This coding will help users who are searching for the club's address or for events happening in June.

Okay, that was a preview. Don't worry about the specific syntax just yet; we'll come back to that. But I wanted to expand the example enough to make clear the important implications of using semantic markup.

Are These Tags Compatible With All Browsers?

Browsers are in the process of adopting HTML5, so not all current browsers support all HTML5 elements. When we explore online video, we'll touch on some of the compatibility challenges this causes.

Internet Explorer and Firefox currently (but somewhat irregularly) support HTML5 tags like <header>, <footer>, and <aside>. In contrast, the Safari browser on iPhones recognizes all HTML5 elements. For this reason, we'll target the iPhone audience in our exploration of HTML5. And in the process, you'll have a chance to enhance your skills at creating iPhone-friendly pages.

Structuring Pages With HTML5 Semantic Markup

In HTML5, standardized tags replace <div> tags to identify blocks of content. The names of these new HTML5 tags are self-explanatory:

• The <header> element holds content at the top of a page.
• The <nav> element holds navigation content. In other words, it holds links to other sections of the page or links to other pages. 
• The <article> element holds page content, and <section> elements hold subtopics within an article. You never use a <section> element outside of an <article> element, and usually you have at least two <section> elements within an <article> element.
• The <aside> element is sidebar content, usually within an article. (A sidebar is a short related article that appears next to a longer article. The sidebar is usually in a box.)
• The <footer> element holds typical footer content at the bottom of a page. A footer often holds copyright information, the name of the author, user comments, or links to related sites.

HTML5 semantic elements

We'll explore more HTML5 elements as we go, but these are the key ones that designers use to organize page content.

Getting Started With Semantic Tags

Let's create a new HTML page that we'll use for our HTML5 content and layout. We'll name it semantic.html and give it a page title of HTML5 Template.

Open a new file in your text editor with the following code:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title> HTML5 Template </title> 
</head> 
<body> 
<div id="wrapper">
</div>
</body> 
</html>

Save the file as semantic.html.

There's nothin' really new here . . . yet! But we're going to start using HTML5 elements to structure content.

Creating the Header

We'll use the HTML5 <header> element to organize all the content that goes at the top of our page. And we'll use HTML elements like <p>, <h1>, and so on to define our formatting.

An HTML5 page usually has a <header> at the beginning, so let's start by creating that. Add the following code between the <div> and </div> tags:

<header> 
<h1>Header Content Goes Here</h1> 
</header>

Note that we included an <h1> tag and some sample text within our header to make our template easier to use. We can replace the content with real content when we use this template to create real pages.

The page isn't much to look at in a browser, as you can see here:

Previewing a page without styles

Before this lesson is over, we'll spruce up our design by defining CSS styles for each of the HTML5 elements we use.

Here's something you might find interesting: Even though the formatting of our HTML5 element isn't defined yet—because we haven't created a CSS style for the <header> tag—the functionality still helps with search engine optimization.

Creating Articles and Sections

Let's create the <article> element, which we'll use to hold most of our content in HTML5 pages. We'll also create the <section> element that holds subsections within an article.

Add the following code for the <article> and <section> elements, including placeholder text and headings, after the </header> tag:

<article> 
<h3>Article heading goes here</h3> 
<p>First article content goes here</p> 
<p>more content goes here</p> 
<section> 
<h3>1st section heading goes here</h3> 
<p>1st section content goes here</p> 
</section> 
<section> 
<h3>2nd section heading goes here</h3> 
<p>2nd section content goes here</p> 
</section>
</article>

If we save our HTML file and open it in a browser, we can see the outline of a page coming to life!

HTML5 page template taking shape . . . still without styling

Adding an Aside Element

Like other HTML5 design elements, the <aside> element is intended for a certain kind of content. Images, text, or videos in an <aside> element should depend on and relate to content in an article or section of an article.

For example, no designer should use, and no competent designer will use, the <aside> element for navigation content. Instead, blocks of navigation content are embedded in the <nav> element, which we'll explore in the next chapter. Among the advantages of this: Any designer can step into any website project, knowing which elements are associated with what content.

To add an <aside> element to the HTML on your page, insert it within the first <article> element in the code:

<aside><p>Sidebar content, related to the article, goes here </p></aside>

The figure below shows all our code so far:

Adding an aside element

Creating a Footer

The last major layout element in our HTML5 page is a <footer> element. As with all the HTML5 elements we're using to create our Web page, the <footer> element will come to life only when we add CSS rules to style the element. When we get to that—and we will, quite soon!—we'll define properties like height and background color to make the footer look like a distinct box at the bottom of the page.

For now, though, we'll continue to build the "skeleton" of the page—the HTML5 code. We'll do this by placing a <footer> element at the bottom of the page, using the following code right after the closing </article> code and right before the closing wrapper div tag:

<footer> <h5>Page footer content goes here</h5></footer>

Before moving on to the next chapter, check your code. Your semantic.html file should look something like this in your text editor:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title> HTML5 Template </title>
</head>
<body>
<div id="wrapper">
<header> <h1>Header Content Goes Here</h1> </header> 
<article> 
<aside>
<p>Sidebar content, related to the article, goes here </p>
</aside> 
<h3>Article heading goes here</h3> 
<p>First article content goes here</p> 
<p>more content goes here</p> 
<section> 
<h3>1st section heading goes here</h3> 
<p>1st section content goes here</p> 
</section> 
<section> 
<h3>2nd section heading goes here</h3> 
<p>2nd section content goes here</p> 
</section> 
</article>
<footer> <h5>Page footer content goes here</h5></footer> 
</div>
</body>
</html>

We've created a basic HTML5 page template. Now we can customize it, add content, and create additional articles, sections, and asides as needed.

Structure Elements for Navigation, Dates, Times, and Addresses

We're using HTML5 elements to define content types (like a header, footer, article, section, or aside). Once we define CSS styles for these elements—which we'll do in Chapter 4—they'll become layout elements with sizes (in many cases), background colors, and so on.

Some HTML5 elements aren't necessarily for layout. For example, you can place navigation elements inside a header or footer or both, and they might not have any particular layout rules. But in HTML5, we still place navigation content within <nav> tags so that browsers will identify and respond to that content.

Here's an example. Among my Web design clients are theaters and clubs, all of which include event schedules on their sites. As we convert those pages to HTML5, we're starting to tag the dates and times of events with HTML5 <date> and <time> elements. Tagging the time and date with HTML5 elements makes it easier for site visitors to tap on a date and time and add the event to a calendar.

Several HTML5 tags identify types of content like this. We won't explore them all, but we'll include four of the most useful:

• <nav> for any navigation element, anywhere in a document
• <date> for dates of upcoming events (not historical dates)
• <time> for the times of upcoming events (again, not for historical events)
• <address> for a Web URL or a physical address (like 57 Main Street)

Adding <nav> Elements

Navigation content in HTML5 goes inside <nav> tags. Let's create <nav> link placeholders inside the header and footer in our HTML5 page layout. To do this, we'll add the following code to place a link to the site home page (index.html) plus three additional placeholder links within the <header> tags.

Insert this code inside the header element, after the placeholder text "Header Content Goes Here":

<nav> 
<h4>
<a href="index.html">Home</a> | <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> 
</h4> 
</nav>

The whole <header> element should look something like this now:

Embedding a nav element in a header element

As you can see, we're including <h4> tags to apply any formatting associated with the level 4 heading to the links.

Now You Try

If you're working your way through the lesson, add the same navigation content, with the <nav> element defining it, to the footer. Just copy and paste the <nav> content into your footer. I'll show you my code in a moment, but don't peek yet, okay?

Here's what my footer code looks like. How does yours compare?

Embedding a nav element in footer

Defining an Address

The HTML5 <address> element is for presenting contact information—a URL, an email address, or a physical address.

One good place for an <address> element is within the <footer> element. To include placeholder content for a contact email address link, add the following code inside <address> tags and embedded within the footer. This line of code should go before the closing </footer> tag.

<address> <p>Contact us at <a href="mailto:us@us.com">us@us.com</a></p></address>

When you save your file and refresh the page in your browser window, the content within the <address> tags displays in italics. Browsers that support HTML5 do this by default to make it easy and intuitive for folks to find contact information on Web pages.

That code, previewed in a browser, looks like this:

Content within the <address> element,
displayed in italics in a browser

Using the Time Element

As I noted earlier, you wouldn't use the <time> element every time a time or date appears on your Web page. Instead, you'd use it to identify scheduled events. For example, if an article contains a reference to the fact that the band Green Day formed in 1987, you wouldn't put that information inside <time> tags. On the other hand, if Green Day is playing at your club at 9 p.m. on January 1 of next year, that information should be inside a <time> element.

You can use the <time> element anywhere in an HTML page. For example, if an event starts at midnight, you can put this information inside <time> tags:

<p>All events start at <time>midnight</time></p>

We won't add a <time> element to our page now, but I wanted to introduce you to it. Have fun playing with it on your own.

Surveying More Semantic Elements

There are 22 semantic elements. Some are rather obscure, like the <progress> element that you can use to define how much of a task is complete. For instance, your user might like to know how much of a particular file has uploaded or how much of a particular video has downloaded. There's also the <rp> tag, which applies only if you're embedding server-side data supplied through the Ruby programming language.

We've covered the most important semantic elements, but let me introduce you to several that are useful in specific situations:

• <figure> applies to artwork. It overlaps somewhat with the <img> tag in traditional HTML.
• <figcaption> applies to captions for a <figure> element.
• <mark> is for defining highlighted text. This element is especially useful if you want to draw your user's attention to a particular word or passage.

Now that we've created a page layout using HTML5 elements, it's time for our final step in this lesson.

Defining Style Rules for HTML5 Elements in a CSS File

In this chapter, we'll create a linked CSS style sheet that defines the size (where appropriate) and other attributes of the HTML5 tags we've used as layout elements.

Just to be clear: Almost no HTML5 semantic tags have any default formatting (the <address> tag is an exception). And there's no centrally distributed, standardized style sheet that everyone links to for style definitions that apply to semantic tags.

We won't be breaking new ground here. In previous lessons, you've used CSS to define selectors (sometimes called rules) that define how tags, class styles, and ID styles look. But until now, you've applied those CSS styles to <div> tags (either ID or class styles). Now you'll apply CSS styles directly to HTML5 elements to create layout boxes.

I'm going to work with the style.css file we've been using. But if you don't have a style sheet yet, it's not too late to create one. Either open the style.css file in your code editor, or create a new file and save it as style.css.

Defining the <header> and <footer> Styles

Let's define a distinct size and background color for our header and footer elements. You might remember from your intermediate CSS class (or the crash-course review of that material in Lesson 2) that we can define styles that apply to multiple elements by listing those elements with commas between them.

So anywhere in your CSS file, create a header and footer selector (rule) with a white background, red text, and top and bottom padding of 5 pixels:

header, footer {  	
background-color: white;
color: red;
padding-top:5px;
padding-bottom:5px;  
}

We can preview our page now in an HTML5-compliant browser.

Applying styling to the header and footer

Creating a Style for <aside> Elements

We face an interesting challenge in creating a style definition for the <aside> element. People often consider this material to be "sidebar" content. But because our HTML5 page targets iPhone users, we're trying to avoid multicolumn layouts.

Let's experiment. Try aligning the <aside> element right in a 300-pixel-wide column with five pixels of padding, five pixels of margin, and a beige background. To do that, add this code to whatever CSS file you're using (it can be the style.css file we began in Lesson 2 or any other linked CSS file):

aside { 
background-color: beige;
float: right; 	
width: 300px; 	
margin: 5px; 	
padding: 5px; 
}

This looks okay in a browser, as shown here:

Previewing the floated <aside> element

Styling the <mark> Tag

We could enhance our style sheet with many more style definitions. For instance, we could create style definitions for the <article> and <section> elements. And we've already defined styles for headings, paragraphs, and lists.

Some HTML semantic elements really need specific CSS styling to do their thing effectively. For example, we saw that adding a float: right property to the <aside> element right-aligned the aside content and made it look more like a sidebar. Without that float, the <aside> element doesn't do much.

Or take the <mark> element we surveyed. It's hard to imagine an effective use of this tag without applying a background color. Let's experiment with that. Add this style definition to your style sheet:

mark {background-color:aqua;}

Then apply the <mark> tag to content in your page. For example:

<p>Sidebar content, <mark>related to the article,</mark> goes here </p>

Find a few other places to experiment with the <mark> element, and test the page in a browser.

Styling and applying the <mark> element

Building a Figure and Figcaption Box

The potent combination of <figure> and <figcaption> elements appears in all kinds of page designs that combine images or artwork with captions. Let's work through an example.

First, define styles for both elements in your style sheet. Feel free to customize, but here's an example of a figure style you might start with. As always, this new style can go anywhere in your CSS file, but adding new styles at the end of the file is often a good approach:

figure {
position:relative;
width:220px;
height:200px;
background-color:white
margin:5px;
padding:5px;
border:1px solid black;
}

And here's some starter code for a figcaption style:

figcaption {
Position:bottom;
Background-color:black;
Color:white;
}

Then, in our HTML file, embed this code inside the <aside> element, before the closing </aside> tag:

<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Opensource.svg/220px-Opensource.svg.png">
<figcaption>
<h5>caption goes here</h5>
</figcaption>
</figure>

If we test our figure and figcaption styles in a browser, the page comes together something like this:

Using a figure and figcaption style

Options for Older Browsers

Because of Microsoft's approach to browser updates, there will continue to be users stuck with older versions of Internet Explorer that don't support HTML5 semantic elements. And some of these users work for companies that prohibit them from installing modern browsers like Chrome or Firefox.

We can take three approaches to this problem:

1. Ignore it. In some circumstances, it isn't a priority to create pages that work in IE 8.
2. Apply what I call graceful degradation. Most of the styling we defined and applied to HTML5 semantic elements in this lesson enhance page content, but they aren't essential. Visitors whose browsers don't recognize HTML5 elements will still see basic page content.
3. Add this code anywhere in the <head> element in a Web page. The code links to a JavaScript that allows old versions of Internet Explorer to interpret HTML5 elements:

<!‐-[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

This workaround, called HTML5 Shiv, usually works, but you can't test it on your own computer. The script only works when you upload pages to an online hosting server.

We're almost done with this lesson! Let's go to Chapter 5, where we'll review today's content and talk about times and places where you shouldn't use HTML5.

Summary

Semantic tags are valuable when you're working with pages that include substantial text. The most significant HTML5 semantic tags organize and structure text.

With that perspective, let's survey the specific advantages to using HTML5 semantic elements.

First of all, you probably noted that it was easier to design our page using HTML5 because we didn't need to use many div tags. Elements like <header>, <footer>, <article>, and <aside> eliminated the need to make up ID or class div tag styles.

We did use a div tag to define the page size (our wrapper ID style). And div tags remain part of Web page design in HTML5. But in most cases, semantic elements eliminate the need to create a whole batch of div tag styles.

Second, as browsers and search engines more fully exploit the ability to extract content through HTML5 tags, our page will be ready for them.

What's the downside? Users, designers, and search engines haven't fully embraced HTML5 yet—and we'd experience that problem with any kind of cutting-edge technology. We explored three ways to deal with that: not worrying about IE 8, designing so that IE 8 users see content even if they don't see formatting, and using the HTML5 Shiv JavaScript that makes most HTML5 markup accessible in IE 8.

When Shouldn't I Use Semantic Tags?

Here are a few scenarios in which semantic tags aren't that valuable:

• Your page has almost no text.
• Your page is entirely composed of a slide show.
• Your page is almost entirely composed of a video.
• Many of your intended audience members use Internet Explorer 8.

In Lesson 9, we'll talk about advanced responsive design. You'll find out how to make your page attractive whether your user is viewing it on a laptop, smartphone, tablet, or desktop computer.

Don't forget that you still have the FAQs to read and a quiz to take. If you have questions or concerns, let me know in the Discussion Area!